<script setup>
import {Location} from "@element-plus/icons-vue";
import {RouterView} from "vue-router";
import router from "../router/index.js";
import {rabbitmqAuth, rabbitmqStore} from "../stores/counter.js";
import {extensions, whoami} from "../http/rabbitmq/common.js";
import {onMounted, ref} from "vue";
import {selectParameter} from "../http/rabbitmq/parameter.js";
import {listNode} from "../http/rabbitmq/node.js";
import {ElNotification} from "element-plus";
import ByteTools from "../tools/ByteTools.js";


const refreshInterval = ref()
let userInfo = ref({
  "name": "",
  "tags": [],
  "is_internal_user": null
})

const extensionList = ref([])
const hasShovel = ref(false)

function handleCommand(command) {
  if (command === "Logout") {
    rabbitmqAuth().setBasic("", "")
    router.push({path: 'login'})
  }
}

function handleWhoami() {
  whoami().then(response => {
    userInfo.value = response
    handleExtensions()
  }).catch(e => {
    router.push({path: 'login'})
  })

}

function handleExtensions() {
  extensions().then(response => {
    extensionList.value = response
    extensionList.value.forEach((item, index, array) => {
      let itemElement = item['javascript'];
      if (itemElement === 'shovel.js') {
        hasShovel.value = true
      }
    })
  })
}

function setSystemParameters(){
  selectParameter("MemUsedRate").then(response => {
    rabbitmqStore().setMemUsedRate(response['value'])
  })
  selectParameter("DiskFreeRate").then(response => {
    rabbitmqStore().setDiskFreeRate(response['value'])
  })
}

function healthChecks() {
  listNode().then(response => {
    for (const item of response) {
      if(item.mem_alarm){
        ElNotification({
          title: 'node[' + item.name + '] 内存不足',
          message: '内存已使用[' + ByteTools.formatBytes(item.mem_used, 0) + '] 限制为[' + ByteTools.formatBytes(item.mem_limit, 0) + ']',
          type: 'warning',
        })
      }
      if(item.disk_free_alarm){
        ElNotification({
          title: 'node[' + item.name + '] 磁盘不足',
          message: '磁盘剩余[' + ByteTools.formatBytes(item.disk_free, 0) + '] 限制为[' + ByteTools.formatBytes(item.disk_free_limit, 0) + ']',
          type: 'warning',
        })
      }
    }
  })
}

function changeRefreshInterval() {
  rabbitmqStore().setRefreshInterval(refreshInterval.value)
}

onMounted(() => {
  refreshInterval.value = rabbitmqStore().refreshInterval
  handleWhoami()
  setSystemParameters()
  healthChecks()
})

</script>

<template>
  <div class="layout-container">
    <div class="layout-header">
      <div style="width: 20px"/>
      <img src="../assets/64.png" alt="Vue logo" style="width: 42px"/>
      <span style="font-size: 32px; margin-left: 20px">Embrace Source MQ</span>
      <div style="flex-grow: 1;"/>
      <el-select
          @change="changeRefreshInterval()"
          v-model="refreshInterval"
          style="width: 100px; margin-right: 20px">
        <el-option
            v-for="item in rabbitmqStore().refreshTime"
            :key="item.ukId"
            :label="item.name"
            :value="item.value"
        />
      </el-select>
      <div style="width: 10px"/>
      <el-dropdown
          @command="handleCommand"
          trigger="click" style="right: 10px;" split-button>
        <el-avatar
            style="width: 25px; height: 25px;"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
        {{ userInfo.name }}
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="Logout">Logout</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="layout-main">
      <div class="layout-aside">
        <el-menu
            router
            class="layout-aside-menu">
          <el-menu-item index="/dashboard">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>数据大屏 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/node">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>节点管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/exchange">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>交换机管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/queue">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>队列管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/user">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>用户管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/connection">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>连接管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/channel">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>通道管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/vhost">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>Vhosts管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/policy">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>策略管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item v-if="hasShovel" index="/shovel">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>Shovel管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/parameter">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>参数管理 </span>
            </template>
          </el-menu-item>

          <el-menu-item index="/webhook">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>webhook管理 </span>
            </template>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="layout-content">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<style>
.layout-container {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.layout-header {
  display: flex;
  align-items: center;
  height: 60px;
  border-bottom: #5cadff 1px solid;
}

.layout-main {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: calc(100% - 61px);
  overflow: hidden;
}

.layout-aside {
  flex: none;
}

.layout-aside-menu {
  width: 150px;
  max-width: 150px;
  height: 100%;
  overflow-y: auto;
}

.layout-content {
  flex: auto;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>